{% extends 'base.html' %}

{% block head %}
    <script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/js/slide.js"></script>
{% endblock head %}

{% block center_body %}

	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">全部商品分类</h1>
			<ul class="navlist fl">
				<li><a href="{% url "df_goods:index" %}">首页</a></li>
				<li class="interval">|</li>
				<li><a href="#">手机百货</a></li>
				<li class="interval">|</li>
				<li><a href="#">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="center_con clearfix">
		<ul class="subnav fl">
			<li><a href="#model01" class="fruit">热门类目</a></li>
			<li><a href="#model02" class="seafood">居家日用</a></li>
			<li><a href="#model03" class="meet">热卖杯壶</a></li>
			<li><a href="#model04" class="egg">收纳整理</a></li>
			<li><a href="#model05" class="vegetables">厨工工具</a></li>
			<li><a href="#model06" class="ice">外出用具</a></li>
		</ul>
		<div class="slide fl">
			<ul class="slide_pics">
				<li><img src="/static/images/1.jpg" alt="幻灯片"></li>
				<li><img src="/static/images/2.jpg" alt="幻灯片"></li>
				<li><img src="/static/images/3.jpg" alt="幻灯片"></li>
				<li><img src="/static/images/4.jpg" alt="幻灯片"></li>
			</ul>
			<div class="prev"></div>
			<div class="next"></div>
			<ul class="points"></ul>
		</div>
		<div class="adv fl">
			<a href="#"><img src="/static/images/6.jpg"></a>
			<a href="#"><img src="/static/images/7.jpg"></a>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model01">热门类目</h3>
			<div class="subtitle fl">
				<span>|</span>

                {% for g in type01 %}
                    <a href="/{{ g.id }}/">{{  g.gtitle|slice:'10' }}</a>
{#                    这里建立一个点击量前四位的商品的链接#}
{#                    模板过滤器slice, 取变量前 N 个字符，可用于中文 #}
                {%  endfor %}
			</div>
			<a href="/list1_1_1/" class="goods_more fr" id="fruit_more">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="/static/images/居家日用.jpg"></div>
			<ul class="goods_list fl">
{#				<li>#}
{#					<h4><a href="#">草莓</a></h4>#}
{#					<a href="#"><img src="/static/df_goods/goods003.jpg"></a>#}
{#					<div class="prize">¥ 30.00</div>#}
{#				</li>#}
                {% for goods in type0 %}
{#                    按照商品的最新上穿建立显示#}
                <li>
                    <h4><a href="/{{ goods.id }}/">{{ goods.gtitle }}</a></h4>
                    <a href="/{{ goods.id }}/"><img src="{{ MEDIA_URL }}{{ goods.gpic }}"></a>
                    <div class="prize"> ￥ {{ goods.gprice }} </div>
                </li>
                {% endfor %}
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model02">居家日用</h3>
			<div class="subtitle fl">
				<span>|</span>

                {% for g in type1 %}
                    <a href="/{{ g.id }}/">{{ g.gtitle|slice:'10' }}</a>
                {% endfor %}
			</div>
			<a href="/list2_1_1/" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="/static/images/居家日用.jpg"></div>
			<ul class="goods_list fl">
                {% for goods in type11 %}
                <li>
                    <h4><a href="/{{ goods.id }}/">{{ goods.gtitle }}</a></h4>
                    <a href="/{{ goods.id }}/"><img src="{{ MEDIA_URL }}{{ goods.gpic }}"></a>
{#                    静态文件添加目录static前一定加"/"#}
                    <div class="prize"> ￥ {{ goods.gprice }} </div>
                </li>
                {% endfor %}
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model03">热卖杯壶</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">杯子</a>
				<a href="#">茶壶</a>

			</div>
			<a href="#" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="/static/images/居家日用.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>

	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model04">收纳整理</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">杯子</a>
				<a href="#">茶壶</a>
			</div>
			<a href="#" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="/static/images/goods013.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model05">厨工工具</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">杯子</a>
				<a href="#">茶壶</a>
			</div>
			<a href="#" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="/static/images/居家日用.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model06">外出用具</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">杯子</a>
				<a href="#">茶壶</a>
			</div>
			<a href="#" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="/static/images/goods013.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">雨伞</a></h4>
					<a href="#"><img src="/static/images/goods013.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="/static/js/slide.js"></script>
    <script type="text/javascript">
        BCSlideshow('focuspic');
        var oFruit = document.getElementById('fruit_more');
        var oShownum = document.getElementById('show_count');

        var hasorder = localStorage.getItem('order_finish');

        if(hasorder)
        {
        oShownum.innerHTML = '2';
        }

        oFruit.onclick = function(){
        window.location.href = 'list.html';
        }
    </script>

{% endblock center_body %}
